<template>
  <div class="list">
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="itemicon" :class="'itemicon'+index"></div>
      <div class="itemname">{{item.field_name}}</div>
      <div class="itemnumber"><span class="number">{{item.field_value}}</span>{{item.unit}}</div>
    </div>
  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage.js'
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      postAction('/topic/data/listAllData/dy_dp_shzl_zzzz_gk', {}).then(res => {
        if (res.result && res.result.data) {
          this.list = res.result.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  .item {
    width: 130px;
    margin-right: 10px;
    &:nth-child(3n) {
      margin-right: 0px;
    }
    .itemicon {
      width: 95px;
      height: 70px;
      margin: 0 auto;
      background: url("../../images/comprehensive_icon1.png") no-repeat center;
      background-size: auto 100%;
      &.itemicon1 {
        background: url("../../images/comprehensive_icon2.png") no-repeat center;
        background-size: auto 100%;
      }
      &.itemicon2 {
        background: url("../../images/comprehensive_icon3.png") no-repeat center;
        background-size: auto 100%;
      }
      &.itemicon3 {
        background: url("../../images/comprehensive_icon4.png") no-repeat center;
        background-size: auto 100%;
      }
      &.itemicon4 {
        background: url("../../images/comprehensive_icon5.png") no-repeat center;
        background-size: auto 100%;
      }
      &.itemicon5 {
        background: url("../../images/comprehensive_icon6.png") no-repeat center;
        background-size: auto 100%;
      }
    }
    .itemname {
      width: 100%;
      text-align: center;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .itemnumber {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
      .number {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #eacc06;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
